import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import { useEffect, useLayoutEffect,useRef } from 'react'

function App() {
  //   const [number, setNumber] = useState(0)
  //   const handleClick = () => setInterval(() => {
  //     // 此时 number 一直都是 0
  //     setNumber(number + 1)
  //   }, 3000)
  // return (
  //   <button onClick={handleClick} > 点击 {number}</button>
  // )

  // const [test, setTest] = useState(0)
  // useEffect(() => {
  //   console.log(test);
  // }, [test])
  // let i = 0;
  // const handleClick = () => {
  //   setTest(i++)
  // }
  // return (
  //   <button onClick={handleClick} > 点击 </button>
  // )

  // useEffect(() => {
  //   const square = document.querySelector(".square");
  //   square.style.transform = "translate(-50%, -50%)";
  //   square.style.left = "50%";
  //   square.style.top = "50%";
  // }, []);

  // return (
  //   <div className="center">
  //     <div className="square"></div>
  //   </div>
  // )

  const dom = useRef(null)
  const handerSubmit = () => {
    /*  <div >表单组件</div>  dom 节点 */
    console.log(dom.current)
  }
  return (
    <div>
      {/* ref 标记当前dom节点 */}
      <div ref={dom} >表单组件</div>
      <button onClick={() => handerSubmit()} >提交</button>
    </div>
  )
}

export default App
